<template>
  <div>
    <h2>姓名操作</h2>
    姓氏：<input type="text" name="" v-model="user.firstName">
    名字：<input type="text" name="" v-model="user.lastName">
    <h2>计算属性展示</h2>
    姓名 <input type="text" v-model="fullName">
    姓名 <input type="text" v-model="setName">
  </div>
</template>

<script setup>
import { computed, reactive } from 'vue';

const user = reactive({
  firstName: "中华",
  lastName: '面包'
})
// 只能单向获取 依赖数据发送变化时结果会变
const fullName = computed(() => {
  return user.firstName + user.lastName
})

// 双向联动  set get变成
let setName = computed({
  // 获取
  get() {
    return user.firstName + '-' + user.lastName
  },
  // 修改
  set(val) {
    console.log(val)
    user.firstName = val.split("-")[0]
    user.lastName = val.split('-')[1]
  }
})
</script>

<style lang="scss" scoped></style>